<template>
  <div class="container">
    <Container>
      <!-- 筛选区域 -->
      <QuestionsFilter
        @searchFn="searchFn"
        @getQuestionsList="getQuestionsList"
      ></QuestionsFilter>
      <!-- 数据展示区域 -->
      <DataDisplay :total="counts"></DataDisplay>
      <!-- 列表区域 -->
      <el-table class="tabel-style" :data="questionsList">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120px"
        ></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column label="题型">
          <template v-slot="{ row }">
            <span>{{ row.questionType | questionTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="260px">
          <template v-slot="{ row }">
            <span>{{ row.question | html2Text }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template v-slot="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template v-slot="{ row }">
            <span>{{ row.difficulty | difficultyFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              size="small"
              plain
              type="primary"
              icon="el-icon-view"
              circle
              @click="quesViewClick(row.id)"
            ></el-button>
            <el-button
              size="small"
              plain
              type="success"
              icon="el-icon-edit"
              @click="questionEditFn(row.id)"
              circle
            ></el-button>
            <el-button
              size="small"
              plain
              type="danger"
              icon="el-icon-delete"
              @click="questionDelFn(row.id)"
              circle
            ></el-button>
            <el-button
              size="small"
              plain
              type="warning"
              icon="el-icon-check"
              @click="questionSelectedFn(row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
      <!-- 题目预览框 -->
      <QuestionsView
        :showQuestionsView.sync="showQuestionsView"
        :questionItem="questionItem"
      ></QuestionsView>
    </Container>
  </div>
</template>

<script>
import QuestionsFilter from '@/module-hmmm/components/questions-filter'
import QuestionsView from '@/module-hmmm/components/questions-view'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
export default {
  name: 'Qusetions',
  components: {
    QuestionsFilter,
    QuestionsView
  },
  data () {
    return {
      questionsList: [], // 基础题库列表
      page: {
        page: 1,
        pagesize: 10
      },
      counts: 0, // 总数
      showQuestionsView: false, // 题目预览弹出层
      questionItem: {} // 单个题目信息
    }
  },
  created () {
    this.getQuestionsList()
  },
  methods: {
    // 获取基础题库列表
    async getQuestionsList () {
      const { data } = await list(this.page)
      // console.log(data)
      this.questionsList = data.items
      this.counts = data.counts
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getQuestionsList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getQuestionsList()
    },
    // 筛选功能
    async searchFn (value) {
      console.log(value)
      // get参数过滤空值
      const query = { ...value, ...this.page }
      Object.keys(query).forEach((key) => {
        if (!query[key]) {
          delete query[key]
        }
      })
      const { data } = await list(query)
      console.log(data)
      this.questionsList = data.items
      this.counts = data.counts
    },
    // 预览功能
    async quesViewClick (quesId) {
      this.showQuestionsView = true
      const { data } = await detail({ id: quesId })
      this.questionItem = data
      console.log(data)
    },
    // 修改功能
    questionEditFn (quesId) {
      this.$router.push(`/questions/new?id=${quesId}`)
      // 数据回显？
    },
    // 删除功能
    questionDelFn (quesId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: quesId })
          this.getQuestionsList()
          // console.log(res)
          // 跳转到精选题库？
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选
    questionSelectedFn (row) {
      console.log(row)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          const res = await choiceAdd({ id: row.id, choiceState: 1 })
          console.log(res)
          this.getQuestionsList()
          this.$router.push('/questions/choice')
          this.$message({
            type: 'success',
            message: '加入精选题库成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
.tabel-style {
  margin-top: 10px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
